<template>
  <!-- showReceivingCoupon -->
    <div class="zong" v-if='homeGoodCoupon.length>0'>
    	<div class="hotBollTop">
    		<div class="hotBollTopTit">热门商圈 
    			<span>全部商户></span>
    			
    		</div>
    		<div class="hotBollTopContent">{{homeGoodCouponParameter.tradingAreaMchtName}} - {{homeGoodCouponParameter.tradingAreaAddr}}</div>
    		<div v-if="!homeGoodCouponParameter.GreaterSix" class="hotBollTopNum"><span>{{num}}</span>/<span>{{homeGoodCoupon.length}}</span></div>
    		<div class="hotBollTopNum" v-if="homeGoodCouponParameter.GreaterSix"><span> </span><span>查看更多商圈></span></div>
    	</div>
    	
		<div class="tab" ref='tabDome' v-if="!homeGoodCouponParameter.GreaterSix">
          <ul class="homeGoodCouponUl">
             <li :class="{'marginleft':!homeGoodCouponParameter.numOne,'marginleft2':homeGoodCouponParameter.numOne}" v-for="item in homeGoodCoupon">
             	
             	<div class="pic_content"><img class="pic_content" v-lazy="item.mchtLogUrl"/></div>
                <div class="tabTxt">
                <div class="card_heard">
      <p class="mcht">
        <span class="mcht_name">{{item.mchtName}}</span>
      </p>
      <p class="type">
        <span class="type_name">{{item.mchtTypeValue}}</span>
        <star :couponComScore="item.mchtComScore" class="type_star_left"></star>
        <span class="type_comment">{{item.mchtComScore}}条</span>
      </p>
     </div>
          <button><i class="iconfont icon-sou"></i>查看优惠券</button>
      </div>
             </li>
          </ul>
        </div>
        
        <div class="tab" ref='tabDome' v-if="homeGoodCouponParameter.GreaterSix">
          <ul class="homeGoodCouponUl">
             <li style="width: 20.5rem;" class="tab2Li" v-for="item in homeGoodCoupon">
                <div class="tab2Content" v-for="i in item">
                	<div class="pic_content_more"><img class="pic_content_more" v-lazy="i.mchtLogUrl"/></div>
                	<div>{{i.mchtName}}</div>
                </div>
             </li>
          </ul>
        </div>
    </div>

</template>

<script>
    import star from './star.vue';
    import getData4 from '../../service/getData4.js'
    import {socket} from '../../utils/socket'
    import { mapState} from 'vuex'

    export default {
        data: () => ({
        	num:1,
        }),
        props:{
        	homeGoodCoupon: {
		      type: Array,
		      default: () => []
		     },
		     num:[String],
		     homeGoodCouponParameter:{
		     	type: Object,
		      default: () => ({
						   tradingAreaMchtName:'',//商券名字
						   tradingAreaAddr:'',//商券地址
						   numOne:'',//商券是否只有一个商户
						   GreaterSix:''//大于6的样式 
			      })
		     },
       },
        components: {
            star
        },
        methods: {
        	srollListener() {
        		let me=this
        		let slt = this.$refs.tabDome.scrollLeft;
            let x=document.getElementsByClassName("marginleft")[0].offsetWidth
            let num=Math.ceil((slt+(x/2))/x)
            me.num=num
            me.mchtAddr=me.homeGoodCoupon[num-1].mchtAddr
            },
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo //用户信息
            }),

        },
        async mounted() {       	
        	 this.$nextTick(() => {
        	 	console.log(this.homeGoodCoupon)
                const me = this;   
                setTimeout(()=>{
                	 me.$refs.tabDome.addEventListener('scroll', me.srollListener, false);//监听滚动条位置
                },100)
                
            });
        },
        beforeRouteLeave(to, from, next) {
            next();
        },
    };
</script>

<style lang="scss" scoped>
     .marginleft{
     	margin-left: 1rem;
     }
     .marginleft2{
     	margin-left: 2.5rem;
     }
  ::-webkit-scrollbar{
	  display:none;
	}
     .zong{
     	width: 100%;
     	/*height: 100%;*/
     	background: #ffffff;
     	margin: 1rem auto;
     }
     .hotBollTop{
     	width: 100%;
     	height: 5rem;
     	line-height: 1.5rem;
     	position: relative;
     	padding: 1rem;
     	.hotBollTopTit{
     		font-size: 1.1rem;
     		
     		span{
     			font-size: .7rem;
     			color: #666666;
     		}
     	}
     	.hotBollTopContent{
     		font-size: .7rem;
     			color: #666666;
     	}
     	.hotBollTopNum{
     		position: absolute;
     		top: 35%;
     		right: 1rem;
     		& span:nth-of-type(1){
     			font-size: 1.9rem;
     		}
     		& span:nth-of-type(2){
     			color: #666666;
     		}
     	}
     }
   /*tab栏*/

    .tab{
        margin-top:.8rem;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .tab ul{
       display: -webkit-inline-box;
    }
    .tab li{
        float: left;
        width:21.8rem;
        font-size: 1rem;
        height: 14rem;
        position: relative;
        .pic_content{
        	width: 100%;
        	height: 10rem;
        	background: salmon;
        }
        .tabTxt{
        	width: 100%;
        	height: 4rem;
        	background: #FFFFFF;
        	position: absolute;
        	line-height: 1.6rem;
        	&.coupon_info_item{
        		width:100%;
        	}
        & button{
        	position: absolute;
        	right: 1rem;
        	top: 30%;
        	color: #ec4e8a;
        	background: #FFFFFF;
        	font-family: "Microsoft YaHei";
        	font-size: .5rem;
        	padding:.1rem .3rem;
        	border: 1px solid #ec4e8a;
        	border-radius: .3rem;
        }
        }
        .card_heard {
      width: 100%;
      position: relative;
      p {
        &.mcht {
        	overflow: hidden;/*内容超出后隐藏*/
			text-overflow: ellipsis;/* 超出内容显示为省略号*/			
			white-space: nowrap;/*文本不进行换行*/
          span.mcht_name {
            font-family: "Microsoft YaHei";
          }
          span.mcht_location {
            font-family: "Microsoft YaHei";
            float: right;
          }
        }
        &.type {
        	overflow: hidden;/*内容超出后隐藏*/
			text-overflow: ellipsis;/* 超出内容显示为省略号*/			
			white-space: nowrap;/*文本不进行换行*/
          span.type_name {
            font-family: "Microsoft YaHei";
            margin-right:10px;
            float: left;
             font-size: .8rem;
          }
          span.type_star_left {
            font-family: "Microsoft YaHei";
          }
          span.type_comment {
            font-family: "Microsoft YaHei";
            margin-left:10px;
            font-size: .8rem;

          }
        }
      }
    }
    //样式2
    .tab2Content{
    	width: 10rem;
    	height: 46%;
    	background: darkolivegreen;
    	float: left;
    	margin: 0 1% 1% 0;
    	position: relative;
    	& .pic_content_more{    		
        	width: 100%;
        	height: 100%;
        	background: salmon;        
    	}
    	& div{
    		color: #ffffff;
    		position: absolute;
    		bottom: 0;
    		text-align: center;
    		width: 100%;
    		height: 2rem;
    		line-height: 2rem;
    	}
    }
    }
</style>
